<template>
  <div id="busHours">
    <apexchart ref="count" type=line height=370 :width="clientWidth" :options="chartOptions" :series="series" />
  </div>
</template>
<script>
export default {
  name: 'HomePage',
  data () {
    return {
      clientWidth: 1000,
      series: [],
      chartOptions: {
        chart: {
          toolbar: {
            show: false
          }
        },
        plotOptions: {
          bar: {
            horizontal: false,
            columnWidth: '35%'
          }
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          show: true,
          width: 2,
          colors: ['transparent']
        },
        xaxis: {
          categories: []
        },
        fill: {
          opacity: 1

        }
      }
    }
  },
  methods: {
    init () {
      this.$get(`suggest/listBusHour`).then((r) => {
        let data = r.data

        let seriesData = []
        let labels = []

        let buses = {}
        for (let i in data) {
          if(!buses[data[i].bus]) {
            buses[data[i].bus] = []
          }
          buses[data[i].bus].push({
            hour: data[i].hour,
            data: data[i].num
          })
          // seriesData.push(parseFloat(data[i].totalDay))
        }

        for(let key in buses) {
          let temp = []
          let i = 0
          for(i in buses[key]) {
            console.log(buses[key][i])
            if(buses[key][i].hour != parseInt(i) + 6) {
              temp.push(0)
            }
            temp.push(parseFloat(buses[key][i].data))
          }
          seriesData.push({
            name: key,
            data: temp
          })
        }

        for(let i = 6; i < 23; i ++) {
          labels.push(i)
        }
        console.log(seriesData)
        this.$refs.count.updateSeries(seriesData, true)
        this.$refs.count.updateOptions({
          xaxis: {
            categories: labels
          },
          title: {
            text: '',
            align: 'center'
          }
        }, true, true)
      }).catch((r) => {
        console.error(r)
        this.$message.error('获取首页信息失败')
      })
    }
  },
  mounted () {
    this.$nextTick(function () {
      this.clientWidth = document.getElementById('busHours').parentNode.offsetWidth
    })
    if (timecount) {
      clearInterval(timecount)
    }
    let timecount = setInterval(() => {
      this.init()
      console.log('timeout:' + new Date())
    }, 300000)
  }
}
</script>
<style lang="less">
</style>
